<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="./include/tag.jsp" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>同行者-会员管理系统</title>
    <%@include file="./include/commonFile.jsp" %>
    <link rel="stylesheet" href="${ctx}/css/ui/index.css"/>
    <link rel="stylesheet" href="${ctx}/css/libs/animate.css"/>
    <link rel="stylesheet" href="${ctx}/static/jquery.flexslider/flexslider.css"/>
</head>
<body>
<h1 style="display:none">
    同行者，CEO户外活动与服务平台，提倡“户外社交激发创业正能量”，核心聚焦众创空间、企业级服务商、商协会、产业园区、创业大赛。在同城及全球范围，致力打造高端、富有深度和持续生命力的户外商务社交场景，开启健康正能量的户外生活方式。</h1>
<%@include file="./include/header1.jsp" %>
<!--滚动-->
<div class="m-banner">
    <%--<div class="banner-bg">--%>
    <%--</div>--%>
    <div class="flexslider">
        <ul class="slides">
            <%--<c:forEach var="advertise" items="${index.advertises}">--%>
            <%--<li class="slide-item" data-url="${advertise.pic}">--%>
            <%--<img src="${advertise.pic}" alt="">--%>
            <%--</li>--%>
            <%--</c:forEach>--%>
            <li class="slide-item" data-url="${ctx}/image/index/index_banner1.png" style="height: 480px;">
                <div style="width: 100%; height: 100%; background: url(${ctx}/image/index/index_banner1.png) center;">
                </div>
            </li>
            <%--<li class="slide-item" data-url="${ctx}/image/index/banner2.jpg">
                <img src="${ctx}/image/index/banner2.jpg" alt="">
            </li>
            <li class="slide-item" data-url="${ctx}/image/index/banner3.jpg">
                <img src="${ctx}/image/index/banner3.jpg" alt="">
            </li>--%>
            <%--<li class="slide-item" data-url="${ctx}/image/index/banner5.jpg.jpg">--%>
                <%--<img src="${ctx}/image/index/banner5.jpg" alt="">--%>
            <%--</li>--%>
        </ul>
    </div>
</div>
<%@include file="./include/banner.jsp" %>

<div class="g-box ctn-mn wow fadeIn">
    <div class="m-ct-hd">
        <div class="hd-inner">
            <h1 class="hd-tt">强大的社群技术管理平台</h1>
            <div><i></i><img src="${ctx}/image/favicon.ico" alt=""><i></i></div>
            <p class="hd-sub-tt">提供标准化、规范化、智能化、数据化，可复制的社群运营管理工具，共同挖掘社群红利</p>
        </div>
    </div>
    <div class="f6">
        <ul class="part-left">
            <li>
                <p><span class="part-name">活动管理系统</span><span class="red-line"></span></p>
            </li>
            <li class="d-none">
                <p><span class="part-name">社交管理系统</span><span class="red-line"></span></p>
            </li>
            <li  class="d-none">
                <p><span class="part-name">赛事管理系统</span><span class="red-line"></span></p>
            </li>
        </ul>
        <ul class="part-mid">
            <li class="active" data-idx="0">01</li>
            <li data-idx="1">02</li>
            <li data-idx="2">03</li>
        </ul>
        <ul class="part-right">
            <li>
                <div class="img-box">
                    <img src="${ctx}/image/index/social/01.png" alt="">
                </div>
                <p class="t-x-c u-m-t10">活动管理是一项针对企业和商会的功能。</p>
                <p class="t-x-c">一般用于讲座、培训、课程、分享会、答谢会、等类似聚合，</p>
                <p class="t-x-c">达到宣传品牌业务，传播品牌价值，预热核心大事件的目的。</p>
            </li>
            <li  class="d-none">
                <div class="img-box">
                    <img src="${ctx}/image/index/social/02.png" alt="">
                </div>
                <p class="t-x-c">“圈子”是一款基于熟人社交建立的专属圈子，可以创建行业圈子或者个性圈子，</p>
                <p class="t-x-c">具备通讯录、动态更新、话题讨论、分享生活等功能，让用户更有归属感。</p>
                <p class="t-x-c">聚合产生价值—交流扩大影响，拓展彼此的人脉，实现用户触达。</p>
            </li>
            <li  class="d-none">
                <div class="img-box">
                    <img src="${ctx}/image/index/social/03.png" alt="">
                </div>
                <p class="t-x-c u-m-t10">分组：方便参赛人员的分类，管理，协调，增加团队凝聚力和感情、默契度。</p>
            </li>
        </ul>
    </div>
    <img src="${ctx}/image/index/social/04.png" style="width: 100%" alt="">
</div>
<div class="g-box ctn-mn wow fadeIn">
    <div class="m-ct-hd">
        <div class="hd-inner">
            <h1 class="hd-tt">强大的社群众筹赛事系统</h1>
            <div><i></i><img src="${ctx}/image/favicon.ico" alt=""><i></i></div>
            <p class="hd-sub-tt">通过众筹的方式获取活动的参赛资格，引爆社群裂变传播，带来高传播+高品质+高口碑的营销事件</p>
        </div>
    </div>
    <div class="f1">
        <ul class="match">
            <li class="u-m-r20">
                <img src="${ctx}/image/index/match/01.png" alt="">
                <div class="m-info">
                    <img src="${ctx}/image/index/match/icon1.png" alt="">
                    <p class="f14">众筹管理、赛事成绩查询等功能，增强赛事体验的专业度和提升大家的参与度</p>
                    <p>赛事管理系统</p>
                </div>
            </li>
            <li class="u-m-r20">
                <img src="${ctx}/image/index/match/02.png" alt="">
                <div class="m-info">
                    <img src="${ctx}/image/index/match/icon2.png" alt="">
                    <p class="f14">告别低效多渠道的信息收集模式，提升3倍效能</p>
                    <p>信息收集和<br/>人员管理分组系统</p>
                </div>
            </li>
            <li class="assist">
                <img src="${ctx}/image/index/match/03.png" alt="">
                <div class="m-info">
                    <img src="${ctx}/image/index/match/icon3.png" alt="">
                    <p class="f14" style="margin-top: -33px;">行者相册是兼具温度感、氛围感，又不乏实用性的电子相册小程序，留住回忆、记录精彩是它最大的意义，而社交属性则是它最显著的符号。操作便捷，分享方便，容量大，戈友们的小天地！</p>
                    <p style="margin-top: 45px;">赛事辅助系统</p>
                </div>
            </li>
        </ul>
    </div>
</div>
<div class="g-box ctn-mn wow fadeIn" style="padding-bottom: 80px;">
    <div class="m-ct-hd">
        <div class="hd-inner">
            <h1 class="hd-tt">强大的社群活动场景服务</h1>
            <div><i></i><img src="${ctx}/image/favicon.ico" alt=""><i></i></div>
            <p class="hd-sub-tt">重走敦煌—玄奘古路｜精彩回顾</p>
        </div>
    </div>
    <div class="f1 swiper-box" style="width: 880px; padding-left: 60px; margin: 0px auto;">
        <div class="flexslider carousel img-box">
            <ul class="slides slides-new">
                <li>
                    <img src="${ctx}/image/index/social/index_s3.jpg" alt="">
                </li>
                <li>
                    <img src="${ctx}/image/index/social/index_s5.jpg" alt="">
                </li>
                <li>
                    <img src="${ctx}/image/index/social/index_s6.jpg" alt="">
                </li>
                <li>
                    <img src="${ctx}/image/index/social/index_s1.jpg" alt="">
                </li>
                <li>
                    <img src="${ctx}/image/index/social/index_s2.jpg" alt="">
                </li>

                <li>
                    <img src="${ctx}/image/index/social/index_s4.jpg" alt="">
                </li>

                <li>
                    <img src="${ctx}/image/index/social/index_s7.jpg" alt="">
                </li>
                <li>
                    <img src="${ctx}/image/index/social/index_s8.jpg" alt="">
                </li>
            </ul>
        </div>
    </div>
</div>
<%@include file="./include/midBanner.jsp" %>
<div class="g-box ctn-mn wow fadeIn bg-red">
    <div class="m-ct-hd bg-red sceen-h">
        <div class="hd-inner">
            <h1 class="hd-tt"  style="color: #fff">携手合作伙伴打造健康、高质量，富有温度的社交场景</h1>
            <div><i></i><img src="${ctx}/image/outing/login.png" alt=""><i></i></div>
            <p class="hd-sub-tt"  style="color: #fff">轻松实现合作伙伴的品牌传播，社群粘度以及利润增长</p>
        </div>
    </div>
    <div class="f5">
        <ul class="cat-lists">
            <li class="active" data-tag="tag0">培训行业</li>
            <li data-tag="tag1">行业平台</li>
            <li data-tag="tag2">商协会</li>
            <li data-tag="tag3">户外品牌</li>
        </ul>
        <div class="cat-info">
            <div class=" tag0">
                <h1>在传统培训场景外，打造一个凝聚人心的户外品牌事件，提升社群成员凝聚力，并通过最大化的传播<br/>和参与转化，开拓社群新的客户，并带动老客户的二次销售转化</h1>
                <ul class="">
                    <li>
                        <img src="${ctx}/image/index/logo/01.jpg" alt="">
                        <p>壹玖·国顺</p>
                    </li>
                    <li>
                        <img src="${ctx}/image/index/logo/02.jpg" alt="">
                        <p>正宸咨询</p>
                    </li>
                    <li>
                        <img src="${ctx}/image/index/logo/03.jpg" alt="">
                        <p>行知商学院</p>
                    </li>
                    <li>
                        <img src="${ctx}/image/index/logo/022.jpg" alt="">
                        <p>北大汇丰商学院</p>
                    </li>
                    <li>
                    </li>
                </ul>
            </div>
            <div class=" tag1" data-idx="1">
                <h1>通过高格调事件进行品牌传播，爆炸式的传播效应、即时的互动与参与，增强社群成员凝聚力，带<br/>转装化率</h1>
                <ul>
                    <li style="margin-right: 130px;">
                        <img src="${ctx}/image/index/logo/05.png" alt="">
                        <p>智联招聘</p>
                    </li>
                    <li class="u-m-r" style="margin-right: 130px;">
                        <img src="${ctx}/image/index/logo/07.png" alt="">
                        <p>樊登读书会</p>
                    </li>
                    <li class="u-m-r">
                        <img src="${ctx}/image/index/logo/06.jpg" alt="">
                        <p>深圳商报</p>
                    </li>
                    <li>
                    </li>
                </ul>
            </div>
            <div class="tag2" data-idx="2">
                <h1>通过高格调事件进行品牌传播，扩大品牌传播力度，增加曝光度，基于庞大的目标群体、爆炸式的传播效<br/>应，实现社交营销</h1>
                <ul>
                    <li class="u-m-r">
                        <img src="${ctx}/image/index/logo/c1.jpg" alt="">
                        <p>草根天使会</p>
                    </li>
                    <li>
                        <img src="${ctx}/image/index/logo/c2.jpg" alt="">
                        <p>中国投资人联盟</p>
                    </li>
                    <li class="u-m-r">
                        <img src="${ctx}/image/index/logo/09.png" alt="">
                        <p>德商汇</p>
                    </li>
                    <li class="u-m-r">
                        <img src="${ctx}/image/index/logo/10.jpg" alt="">
                        <p>深圳市海归协会</p>
                    </li>
                    <li>
                    </li>
                </ul>
            </div>
            <div class="tag3" >
                <h1>通过户外场景进行品牌传播，扩大品牌传播力度，增加曝光度，提升采购效率，通过社交活动增<br/>加营收</h1>
                <ul>
                    <li class="u-m-r">
                        <img src="${ctx}/image/index/logo/d1.jpg" alt="">
                        <p>凯乐石</p>
                    </li>
                    <li>
                        <img src="${ctx}/image/index/logo/13.jpg" alt="">
                        <p>The North Face</p>
                    </li>
                    <li  class="u-m-r">
                        <img src="${ctx}/image/index/logo/15.jpg" alt="">
                        <p>绿野</p>
                    </li>
                    <li class="u-m-r">
                        <img src="${ctx}/image/index/logo/14.jpg" alt="">
                        <p>行装</p>
                    </li>
                    <li>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="g-box m-img m-img-1 wow fadeIn">
    <img src="${ctx}/image/index/bg.png" alt=""/>
    <div class="desc">
        <p>链接全球10万+社群</p>
    </div>
</div>
<div class="g-box ctn-mn wow fadeIn">
    <div class="m-ct-hd">
        <div class="hd-inner">
            <h1 class="hd-tt">强大的社群高端户外场景服务</h1>
            <div><i></i><img src="${ctx}/image/favicon.ico" alt=""><i></i></div>
            <p class="hd-sub-tt">基于社群精英的高端户外体验活动，已成为国内高净值人群身心灵修行和深度场景化社交的最佳选择</p>
        </div>
    </div>
    <div class="f3">
        <ul class="f3-ctn">
            <li class="u-m-r map">
                <div class="f3-img">
                    <img src="${ctx}/image/index/map/1.png" alt="">
                    <div class="map-info"><p>
                        问道八百里流沙，重走千年玄奘之路。感悟玄奘精神，汲取全新的精神能量！
                    </p>
                    </div>
                </div>
                <p>敦煌·玄奘古路</p>
            </li>
            <li class="u-m-r map">
                <div class="f3-img">
                    <img src="${ctx}/image/index/map/2.png" alt="">
                    <div class="map-info">
                        <p>
                            张掖丹霞地貌群，由“七彩丹霞”和“冰沟丹霞”组成。其气势之磅礴、场面之壮观、造型之奇特、色彩之斑斓，大自然的鬼斧神工，令人惊叹，形一个彩色童话世界。
                        </p>
                    </div>
                </div>
                <p>张掖·丹霞地貌</p>
            </li>
            <li class="map">
                <div class="f3-img">
                    <img src="${ctx}/image/index/map/3.png" alt="">
                    <div class="map-info">
                        <p>
                            海南热带雨林国家公园，主体位于海南岛中部山区，总面积4400余平方公里，约占海南岛陆域面积的七分之一。
                        </p>
                    </div>
                </div>
                <p>海南·热带雨林</p>
            </li>
        </ul>
         <ul class="f3-ctn">
            <li class="u-m-r map">
                <div class="f3-img">
                    <img src="${ctx}/image/index/map/4.png" alt="">
                    <div class="map-info"><p>
                        长征路不仅仅是对红军长征胜利的隆重纪念，是对革命先烈的无限缅怀，更是对伟大长征精神的集体感悟。
                    </p></div>
                </div>
                <p>贵州遵义·长征之路</p>
            </li>
            <li class="u-m-r map">
                <div class="f3-img">
                    <img src="${ctx}/image/index/map/5.png" alt="">
                    <div class="map-info"><p>
                        神农架位于中国中东部湖北省。这里有中国中部地区最大的原始森林，是中国大蝾螈、川金丝猴、云豹、金钱豹、亚洲黑熊等许多珍稀动物的栖息地。
                    </p></div>
                </div>
                <p>湖北·神农架</p>
            </li>
            <li class="map">
                <div class="f3-img">
                    <img src="${ctx}/image/index/map/6.png" alt="">
                    <div class="map-info">
                        <p>
                            库布齐沙漠是中国第七大沙漠，在河套平原黄河“几”字弯里的黄河南岸（有的人称为河套沙漠），往北是阴山西段狼山地区。
                        </p>
                    </div>
                </div>
                <p>库布齐·沙漠蓝海</p>
            </li>
        </ul>
        <ul class="f3-lists">
            <li class="u-m-r map">
                <div class="f3-list-img">
                    <img src="${ctx}/image/index/map/7.png" alt="">
                    <div class="map-info"><p>
                        隆冬季节几乎日日飞雪迎宾，好一派北国风光。
                    </p></div>
                </div>
                <p>东北·林海雪原</p>
            </li>
            <li class="u-m-r map">
                <div class="f3-list-img">
                    <img src="${ctx}/image/index/map/8.png" alt="">
                    <div class="map-info"><p>
                        内蒙古呼伦贝尔草原，有一望无际的绿色，有延绵起伏的大兴安岭，还有美丽富饶的呼伦湖。
                    </p></div>
                </div>
                <p>呼伦贝尔·牧草天堂</p>
            </li>
            <li class="u-m-r map">
                <div class="f3-list-img">
                    <img src="${ctx}/image/index/map/9.png" alt="">
                    <div class="map-info"><p>
                        位于内蒙古自治区阿拉善盟阿拉善左旗境内，是腾格里沙漠中的天然湖泊。
                    </p></div>
                </div>
                <p>阿拉善·月亮湖</p>
            </li>
            <li class="map">
                <div class="f3-list-img">
                    <img src="${ctx}/image/index/map/10.jpg" alt="">
                    <div class="map-info"><p>
                        是我国历史上最古老的对外经贸商路，萌芽于2000多年前的汉代，正式形成于唐宋时期。
                    </p></div>
                </div>
                <p>丽江·茶马古道</p>
            </li>
        </ul>
    </div>
</div>
<div class="g-box ctn-mn wow fadeIn">
    <div class="m-ct-hd f4-hd">
        <div class="hd-inner">
            <h1 class="hd-tt">新闻动态</h1>
            <div><i></i><img src="${ctx}/image/favicon.ico" alt=""><i></i></div>
        </div>
    </div>
    <div class="f1 f4">
        <ul class="match">
            <c:forEach var="articles" items="${articleList}" varStatus="status">
                <li ${status.index == fn:length(articleList) -1 ? '' : 'class="u-m-r20"'}>
                    <c:choose>
                        <c:when test="${articles.typeValue == 4}">
                            <img src="${ctx}/image/index/social/n1.png" alt="">
                        </c:when>
                        <c:when test="${articles.typeValue == 5}">
                            <img src="${ctx}/image/index/social/n2.png" alt="">
                        </c:when>
                        <c:when test="${articles.typeValue == 6}">
                            <img src="${ctx}/image/index/social/n3.png" alt="">
                        </c:when>
                    </c:choose>
                    <div class="m-info">
                        <p>${articles.typeName}</p>
                    </div>
                    <div class="f4-info">
                        <c:forEach var="article" items="${articles.articles}">
                            <p>
                                <span>•</span>
                                <a href="${ctx}/article/article/indexArticleDetail.do?id=${article.id}">${article.title}</a>
                            </p>
                        </c:forEach>
                        <p class="f14 u-m-l"><a href="${ctx}/article/article/indexArticleFindByType.do?articleType=${articles.typeValue}" class="more-link">更多 》》</a></p>

                    </div>
                </li>
            </c:forEach>
            <%--<li class="u-m-r20">
                <img src="${ctx}/image/index/social/n2.png" alt="">
                <div class="m-info">
                    <p>产品动态</p>
                </div>
                <div class="f4-info">
                    <p><span>•</span>行走画押（小程序上线）</p>
                    <p><span>•</span>分销商城上线</p>
                    <p class="f14 u-m-l"><a href="${ctx}/article/article/indexArticleFindByType.do?articleType=5" class="more-link">更多  》》</a></p>
                </div>
            </li>
            <li>
                <img src="${ctx}/image/index/social/n3.png" alt="">
                <div class="m-info">
                    <p>活动动态</p>
                </div>
                <div class="f4-info">
                    <p><span>•</span>第四届社群领袖峰会（敦煌）高峰论坛暨第四届</p>
                    <p><span>•</span>[总裁戈壁行]徒步挑战赛，108名英雄已凯旋而归！</p>
                    <p class="f14 u-m-l"><a href="${ctx}/article/article/indexArticleFindByType.do?articleType=6" class="more-link">更多  》》</a></p>
                </div>
            </li>--%>
        </ul>
    </div>
</div>
<%@include file="./include/footer1.jsp" %>
<script type="text/javascript" src="${ctx}/static/wow/wow.min.js"></script>

<script>
    var headNavIdx = 0

    wow = new WOW(
        {
            animateClass: 'animated',
            offset: 100,
            callback: function (box) {
                console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")
            }
        }
    );
    wow.init();
    $('.f2-r-b[data-idx=' + $('.f2-l .active').data('idx') + ']').show()
    $('.f2-l li').mouseenter(function (e) {
        console.log(e.target)
        $('.f2-l .nav-bar').css('left', e.target.offsetLeft+'px')
        var idx = $(this).data('idx')
        $('.f2-l li.active').removeClass('active')
        $(this).addClass('active')
        $('.f2-r-b').hide()
        $('.f2-r-b[data-idx=' + idx + ']').show()
    })

    $('.f2-r-b .f2-r-ctn li').mouseover(function (e) {
        var opts = ($(this).data('opts') + '').split(',');
        $('#f2_opts li').hide()
        for (var i = 0; i < opts.length; i++) {
            $('#f2_opts li[data-opt=' + opts[i] + ']').show()
        }
    }).mouseout(function (e) {
        $('#f2_opts li').show()
    })
    $('.cat-lists li').mouseenter(function(){
        $(this).addClass('active').siblings('li').removeClass('active')
        var tag = $(this).data('tag')
        $('.' + tag).show().siblings('div').hide()
    })

    $('#panel_2_tt').click(function (e) {
        $(this).next().removeClass('hide')
    })
    var time
    var idx = 0
    $('.part-mid li').click(function (e) {
        idx = $(this).data('idx')
        $(this).addClass('active').siblings('li').removeClass('active')
        $('.part-left').find('li').eq(idx).removeClass('d-none').siblings('li').addClass('d-none')
        $('.part-right').find('li').eq(idx).removeClass('d-none').siblings('li').addClass('d-none')
    })
    // // f6部分的滚动
    time = setInterval(function () {
        idx++
        console.log(idx)
        if (idx === 3) {
            idx = 0
        }
        $('.part-mid li').eq(idx).click()
    }, 2000)
    $('.part-mid li').mouseenter(function (e) {
        clearInterval(time)
        idx = $(this).data('idx')
        $('.part-mid li').eq(idx).click()
    })
    $('.part-mid li').mouseleave(function (e) {
        time = setInterval(function () {
            idx++
            console.log(idx)
            if (idx === 3) {
                idx = 0
            }
            $('.part-mid li').eq(idx).click()
        }, 2000)
    })
    // 地图
    $('.f4-li').mouseenter(function (e) {
        $('.f4-li.active').removeClass('active')
        $(this).find('.f4-li-ctn').css('display', 'inherit')
        var rect = this.getBoundingClientRect()
        if (rect.top > 350) {
            $(this).addClass('top')
        }
        $(this).addClass('active')
    }).mouseleave(function (e) {
        $(this).find('.f4-li-ctn').hide();
        $(this).removeClass('active top');
    })
</script>
</body>
</html>